<template>
  <div>
    <van-field label="礼品名称" v-model="form.name"></van-field>
    <van-field label="所需积分" v-model="form.money"></van-field>
    <van-button round @click="add">添加</van-button>
    <table border="1" cellspacing="0">
      <tr>
        <td>礼品</td>
        <td>所需积分</td>

      </tr>
      <tr v-for="i in lipin" :key="i.id">
        <td>{{ i.name }}</td>
        <td>{{ i.money }}</td>

      </tr>
    </table>
    <div id="jifen" style="width: 400px;height:400px;position: absolute;top: 20px;left: 400px">

    </div>

  </div>
</template>

<script>
import axios from "axios";
import * as echarts from "echarts";
import {reactive} from 'vue'

export default {
  name: "add_lipin",
  setup() {
    let customerlist = reactive({'data': []})

    //初始化websocket
    const initWebsocket = () => {
      let socket = new WebSocket('ws://127.0.0.1:8000/websocketLink/')
      //建立
      socket.onopen = function () {
        console.log('建立连接')
      }
      //接收消息
      socket.onmessage = function (msg) {
        customerlist.data = JSON.parse(msg.data)
        console.log(customerlist)
        //调用echarts
        var chartDom = document.getElementById('jifen');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '5%',
            left: 'center'
          },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
              },
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '40',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: customerlist.data
            }
          ]
        };

        option && myChart.setOption(option);
      }
      //关闭
      socket.close = function (e) {
        console.log(e)
        console.log('close')
      }

    }
    return {
      customerlist,
      initWebsocket
    }
  },
  data() {
    return {
      form: {},
      lipin: [],
      jifen: [],
    }
  },
  methods: {
    add() {
      axios.post('/zuoye/lipin', this.form).then(res => {
        if (res.data.code == 200) {
          alert('添加成功')
        }
      })
    },
    show_lipin() {
      axios.get('/zuoye/lipin').then(res => {
        if (res.data.code == 200) {
          this.lipin = res.data.list
        }
      })
    },
    show_jifen() {
    },
    // get_jifen() {
    //   axios.post('/zuoye/jifen')
    //       .then(res => {
    //         this.jifen = res.data.list
    //
    //
    //       })
    // }

  },
  mounted() {
    this.show_lipin()

    // this.get_jifen()
    this.initWebsocket()

  }
}
</script>

<style scoped>

</style>